<template>
  <div>
    <div>
      <!-- <button v-on:click>反转消息</button> -->
    </div>

    <div>
      <p>video.js播放 m3u8 格式文件 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8</p>
      <video
        id="myvideo-2"
        width="500"
        height="400"
        class="video-js vjs-default-skin"
        controls
        data-setup="{}"
      >
        <!-- hls直播源地址：CCTV1高清 -->
        <source
          src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
          type="application/x-mpegURL"
        />
      </video>
    </div>

    <div>
      <p>
        video.js播放 rtmp 格式文件, 湖南卫视
        rtmp://58.200.131.2:1935/livetv/hunantv
      </p>
      <video
        id="myvideo-3"
        width="500"
        height="400"
        class="video-js vjs-default-skin"
        controls preload="none"
        data-setup="{}"
      >
        <!-- 20200813使用这个下面的地址，如下测试可用 -->
        <!-- <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv" /> -->
      </video>
    </div>

    <div class="test_two_box">
      <p>video.js播放 mp4 格式文件</p>
      <video id="myVideo" class="video-js">
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</template>
<script>
// import "../assets/js/video.js";
import Video from "video.js";
import "video.js/dist/video-js.css";
// import videoplayer from "@/components/videoPlayer";

import videojsFlash from "videojs-flash";
// import videojsSwf from'videojs-swf';
import SWF_URL from "videojs-swf/dist/video-js.swf";


export default {
  //   components: {
  //     videoplayer,
  //   },
  data() {
    return {
      player1: null,
      player2: null,
      player3: null,
      player4: null,
      player5: null,
      videourl: null,
      videoType: null,
    };
  },
  mounted() {
    Video.options.flash.swf = SWF_URL;
    Video.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';;

    Video.options.techOrder = ["html5", "flash"]; //设置视频加载方式

    this.initVideo();
    this.initVideo2();
    this.initVideo3();
  },
  beforeDestroy() {
    // if(this.player1) this.player1.player1
    console.log("beforeDestroy");
    if (this.player1) this.player1.dispose();
    if (this.player2) this.player2.dispose();
    if (this.player3) this.player3.dispose();
    if (this.player4) this.player4.dispose();
    if (this.player5) this.player5.dispose();
  },
  methods: {
    initVideo() {
      //初始化视频方法
      this.player1 = Video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "400px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "400px",
      });

      this.player1.on("ended", function () {
        this.dispose();
      });
    },
    initVideo2() {
      //初始化视频方法
      this.player2 = Video("myvideo-2", {}, function () {
        console.log("videojs-2播放器初始化成功");
      });

      this.player2.on("ended", function () {
        this.dispose();
      });
    },

    initVideo3() {
      //初始化视频方法
      this.player3 = Video("myvideo-3", {
        techOrder: ['flash', 'html5'],
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        sources: [
          {
            // src: "//vjs.zencdn.net/v/oceans.mp4",
            // type: "video/mp4",
            src: "rtmp://58.200.131.2:1935/livetv/hunantv",
            type: "rtmp/hls",
          },
        ]
      }, function () {
        console.log("videojs-3播放器初始化成功");

        this.play();
      });

      this.player3.on("ended", function () {
        this.dispose();
      });
    },
  },
};
</script>